<template>
<div>
    <div style="position:relative;overflow:visible;" h6 w6 bd-gray4 bd-circle bg-cover mgt1 center :style="{'background-image':`url(${member.head})`}">
        <div style="position:absolute;right:0;bottom:0;width:26px;height:26px;" bd-circle nobd bg-orange>
            <img src="../images/level-v1.png" full pd1>
        </div>
    </div>
    <p sz1 mgt2 white text-center>{{member.userName}}</p>
    <p mgt2 text-center white>我的积分：<span blue>{{member.xpValue}}</span></p>

    <Menu theme="dark" width="auto" @on-select="handleOnSelect" mgt2>
        <MenuItem name="home">
            <span>首页</span>
        </MenuItem>

        <p strong mgt3 sz1 white pdx3>交易管理</p>
        <MenuItem name="member-order">
            <span>我的订单</span>
        </MenuItem>
        <MenuItem name="member-refund">
            <span>我的退款/售后</span>
        </MenuItem>
        <MenuItem name="member-xp">
            <span>我的积分</span>
        </MenuItem>

        <p strong mgt3 sz1 white pdx3>评价管理</p>
        <MenuItem name="member-commodity-evaluation">
            <span>商品评价</span>
        </MenuItem>
        <!-- <MenuItem name="member-article-comment">
            <span>文章评论</span>
        </MenuItem> -->

        <p strong mgt3 sz1 white pdx3>我的账户</p>
        <MenuItem name="member-profile">
            <span>个人资料</span>
        </MenuItem>
        <MenuItem name="member-address">
            <span>收货地址</span>
        </MenuItem>
        <MenuItem name="member-change-password">
            <span>修改密码</span>
        </MenuItem>
        <MenuItem name="member-coupon">
            <span>我的优惠券</span>
        </MenuItem>
        <MenuItem name="member-collection">
            <span>我的收藏</span>
        </MenuItem>
        <MenuItem name="member-notice" mgt3>
            <span>会员公告</span>
        </MenuItem>
    </Menu>
</div>
</template>
<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../lib/abpbase'

@Component({
    components: {  }
})
export default class MemberMenu extends AbpBase{
	get member() {
		return this.$store.state.self.member;
	}
	async handleOnSelect(name) {
        this.$router.push({ 
            name: name
        });
	}
}
</script>
